<template>
	<view class="notice-main">
		<view class="head">
			<wd-icon name="sound" color="000000" size="20px"></wd-icon>
		</view>
		<view class="text-container">
			<view class="moving-text">这是从右到左移动的文字</view>
		</view>
		<view class="foot"></view>
	</view>
</template>

<script>
	import {
		ref,
		defineProps
	} from 'vue';

	const props = defineProps({
		noticeList: String
	})
</script>

<style>
	.notice-main {
		background-color: lightyellow;
		display: flex;
		align-items: center;
	}

	.text-container {
		overflow: hidden;
		/* 确保文字不会移出容器外 */
		white-space: nowrap;
		/* 防止文字换行 */
		width: 100%;
	}
	.head {
		width: 30px;
	}
	.moving-text {
		display: inline-block;
		animation: moveLeft 5s linear infinite;
		/* 无限循环，线性速度，持续5秒 */
	}

	@keyframes moveLeft {
		0% {
			transform: translateX(210%);
			/* 从容器右侧开始 */
		}

		100% {
			transform: translateX(-100%);
			/* 移动到容器左侧之外 */
		}
	}
</style>